<template>
	<view>
		<view class="progress-row">
			<view class="progress-count">
				{{currentIndex}}/{{words.length}}
			</view>
			<div class="progress-container">
				<div class="progress-bar" :style="{'width': progress}"></div>
			</div>
		</view>
		<view class="card" v-for="(item,index) in words" :key="index" v-show="index===currentIndex">
			<view class="card-content tn-flex-row-center tn-flex-col-center">
				<view class="word word-top" v-show="type==0">
					{{item.word}}
				</view>
				<view class="audio tn-flex tn-flex-direction-column tn-flex-col-center"  v-show="type==1" @click="playVoice(item.word)">
					<view :class="['audio-flex  tn-bg-gray--disabled tn-flex-center tn-flex-col-center tn-padding-xs' , isPlay ? 'tn-color-blue--dark' : 'tn-color-gray--dark'] ">
						美<text class="tn-icon-audio"></text>
					</view>
					<view class="tip tn-color-gray--dark tn-text-sm" v-show="isPlay">
						音频播放完毕即可答题
					</view>
				</view>
				<view :class="['word word-select',isPlay ? 'tn-color-gray--disabled' : '',selectVal && op==selectVal ? 'active':'']" :key="n"
					v-for="(op,n) in item.explains" @click="selectAns(op,item,index)">
					{{op}}
				</view>
				<view :class="['word word-select', isPlay ? 'tn-color-gray--disabled' : 'tn-color-gray--dark', selectVal=== '' ? 'active':'']" @click="selectAns('',item,index)">
					无正确答案
				</view>
			</view>
			<view class="card-info">
				倒计时<text class="second">{{second}}</text>s，结束自动进入下一题
			</view>
		</view>
	</view>
</template>

<script>
	const pageDataCenter = uniCloud.importObject('page-data-center')
	const AUDIO = uni.createInnerAudioContext();
	let timer
	export default {
		data() {
			return {
				words: [],
				currentIndex: 0,
				qIndex: 0,
				type:0,
				isRight: null,
				selectVal: null,
				id: '',
				second: 8,
				progress: '0%',
				content: [],
				isPlay:false,
				share: {
					title: '词汇小课堂',
					imageUrl: 'https://mp-e3fbd118-dad0-4878-b40b-44597e7aa0eb.cdn.bspapp.com/cloudstorage/2a9a20de-8e3c-4800-b520-646eeaf2133f.png',
					desc: '单词学习打打卡',
					content: '我今天学习了20个单词，你也一起来呀'
				}
			}
		},
		onLoad(e) {
			this.id=e.id
			this.type=e.type || 0
			this.getData(e.id,e.type || 0)
			this.handleTimer()
			// #ifdef MP-WEIXIN
			//解决IOS播放没声音
			wx.setInnerAudioOption({
				obeyMuteSwitch: false
			});
			// #endif
		},
		onHide() {
			timer && clearInterval(timer)
			timer = null
		},
		onBackPress() {
			this.submitScore()
		},
		onUnload() {
			this.submitScore()
		},
		watch:{
			isPlay(val){
				val && setTimeout(()=>{
					this.isPlay=false
				},1000)
			}
		},
		methods: {
			handleTimer(){
				timer && clearInterval(timer)
				setTimeout(() => {
					timer = setInterval(() => {
						this.second == 0 && this.selectAns(null,this.words[this.currentIndex],this.currentIndex)
						this.second > 0 && this.second--
					}, 1000)
				}, 1000)
			},
			getData(id,type=1) {
				pageDataCenter.getTestDetail(id,type).then((res) => {
					this.words = res.data.words
					this.type==1 && this.playVoice(this.words[0]['word'])
				})
			},
			selectAns(op, item, index) {
				this.qIndex = index
				this.isRight = op == item.explain ? true : false
				this.selectVal = op
				this.content[index] = this.isRight
				this.currentIndex+1 == this.words.length && this.submitScore()
				this.currentIndex+1 != this.words.length && setTimeout(() => {
					this.second = 8
					this.currentIndex++
					this.selectVal = null
					this.type==1 && this.playVoice(this.words[this.currentIndex]['word'])
					this.progress = `${(this.currentIndex/this.words.length)*100}%`
				}, 500)
			},
			submitScore() {
				let score=0
				let answer=this.words.map((item)=>item.explain)
				let unitScore = parseInt(100 / this.words.length)
				this.content.forEach((item) => {
					item && (score += unitScore)
				})
				this.progress = `${((this.currentIndex+1)/this.words.length)*100}%`
				pageDataCenter.submitScore({
					id:this.id,
					answer,
					progress: this.progress,
					score:score+'',
					content: this.content,
					finish_date:new Date().getTime()
				},'update').then((res) => {
					timer && clearInterval(timer)
					this.progress == '100%' && uni.redirectTo({
						url: `/pages/test/result?id=${this.id}&score=${score}&type=${this.type}`
					})
				})
			},
			playVoice(word) {
			  AUDIO.src = 'https://dict.youdao.com/dictvoice?type=0&audio='+word
			  this.isPlay=true
			  this.$nextTick(function () {
			    AUDIO.play();
			  });
			},
		}
	}
</script>

<style scoped>
	page,
	.page {
		background-color: #e3ebee;
	}

	.card {
		padding: 20px;
		text-align: center;
		background-color: #fff;
		font-size: 16px;
		margin: 40px auto;
		border: 1px solid #eee;
		border-radius: 8px;
		width: 90%;
	}

	.word-top {
		font-size: 20px;
		margin-bottom: 20px;
		font-weight: 700;
	}

	.word-select {
		padding: 10px;
		text-align: left;
		border: 1px solid #eee;
		color: #666;
		border-radius: 8px;
		box-shadow: 0px 0px 1px rgba(0, 0, 0, .1);
		margin: 15px auto;
	}

	.active {
		border-color: #008df9;
		background-color: #00c4ff;
		color: #fff;
	}

	.progress-row {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		padding: 10px;
		width: 100%;
		margin: 20px 0;
	}

	.progress-container {
		width: 100%;
		background-color: #e0e0e0;
		border-radius: 4px;
		overflow: hidden;
	}

	.progress-bar {
		height: 10px;
		background-color: #5cb85c;
		transition: width 1s ease-in-out;
		border-radius: 4px;
		width: 0;
		/* 默认情况下进度条为0 */
	}
	.audio-flex{
		width: fit-content;
		color: #666;
	}
	.card-info {
		color: #666;
		font-size: 16px;
	}

	.second {
		color: #ffaa00;
	}
</style>